<template>
  <div>
    <el-button class="bg-green" type="primary" size="small" @click="showModifyTabbarDialog()">新增导航图标</el-button>
    <el-table v-loading="tableLoading" :data="tabbarTableList" :max-height="600" border highlight-current-row
              @sort-change="handleSortChange">
      <el-table-column label="图标" width="120" header-align="center" align="center">
        <template slot-scope="scope">
          <el-image :src="scope.row['iconUrl']" :preview-src-list="[scope.row['iconUrl']]" style="width: 60px;height: 60px;background: #f1f2f3;"/>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称" width="180" header-align="center" align="center"/>
      <el-table-column prop="path" label="页面链接" min-width="260" header-align="center" align="center">
        <template slot-scope="scope">
          {{ (scope.row['pathName']|| '--') + '('+scope.row['path'] + ')' }}
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="权重" width="120" header-align="center" align="center"/>
      <el-table-column label="状态" width="120" header-align="center" align="center">
        <template slot-scope="scope">
          <div @click="changeTabbarItemStatus(scope['row'])">
            <el-tag v-if="scope.row.status" type="success" class="cursor-pointer">已启用</el-tag>
            <el-tag v-else type="info" class="cursor-pointer">已禁用</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160" header-align="center" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="success"
            class="bg-green"
            size="small"
            icon="el-icon-edit"
            circle
            @click="showModifyTabbarDialog(scope.row)"/>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            circle
            @click="tabbarDelete(scope.row)"/>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="tabbarCurrentPage"
      :page-size="tabbarPageSize"
      :page-sizes="tabbarPageSizes"
      :total="tabbarTotal"
      class="pagination"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"/>

    <!--添加tabbar-->
    <el-dialog :visible.sync="modifyTabbarDialogVisible" :modal="false" :title="tabbarForm['title']"
               style="background-color: rgba(60, 60, 60, 0.8)" width="460px" class="tabbarDialog" center>
      <el-form ref="tabbarForm" :model="tabbarForm" :rules="tabbarFormRules" label-width="100px">
        <el-form-item label="图标" prop="iconPath">
          <ws-upload-single-img v-model="tabbarForm['iconId']"
                                :path="tabbarForm['iconUrl']"
                                width="80" height="80"/>
          <div class="remark">*注:为保证显示效果,请上传80px*80px的图片</div>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="tabbarForm['name']"/>
        </el-form-item>
        <el-form-item label="跳转页面">
          <el-select v-model="tabbarForm['path']" placeholder="请选择跳转页面">
            <el-option v-for="item in pagePathList" :key="item.url" :value="item.url" :label="item.title"/>
          </el-select>
        </el-form-item>
        <el-form-item label="权重">
          <el-input-number v-model="tabbarForm['sort']"/>
          <div class="remark">*注：权重越大排序越前</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyTabbarDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="submitTabbarForm('tabbarForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { handleSortChange, handleSizeChange, handleCurrentChange } from '../../../../utils/table'
  export default {
    data() {
      return {
        // 导航栏列表
        tabbarList: [],
        // 小程序页面路径
        pagePathList: [],

        // tabbar修改弹窗
        modifyTabbarDialogVisible: false,
        tabbarForm: {
          title: '新增导航图标',
          label: '',
          iconPath: '',
          selectedIconPath: '',
          pageId: ''
        },
        tabbarFormRules: {},
        tabbarTableList: [],
        tabbarCurrentPage: 1,
        tabbarPageSize: this.$store.getters.userInfo.pageSize,
        tabbarPageSizes: [10, 20, 50, 100, 1000],
        tabbarTotal: 0
      }
    },
    created() {
      this.loadData();
      this.loadWxPagePathList();
    },
    methods: {
      handleCurrentChange, handleSizeChange, handleSortChange,
      loadData() {
        const url = '../videoAdmin/navigation/getList';
        const data = {
          type: 1
        }
        this.tableLoading = true;
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.tabbarTableList = res.data.list;
          this.tabbarTotal = res.data.count;
          this.tableLoading = false;
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员');
        })
      },
      // 获取小程序页面路径
      loadWxPagePathList() {
        const url = '../videoAdmin/getAllWxPagePath';
        this.$store.dispatch('GetConnect', { url }).then(res => {
          this.pagePathList = res.data;
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员');
        })
      },
      // 显示tabbar编辑弹窗
      showModifyTabbarDialog(row) {
        this.modifyTabbarDialogVisible = true;
        this.tabbarForm = row || {};
        this.tabbarForm['title'] = row ? '编辑导航图标' : '添加导航图标'
      },

      // 提交
      submitTabbarForm(formName) {
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            const url = (this.tabbarForm['id'] !== undefined && this.tabbarForm['id'] != null && this.tabbarForm['id'] !== '') ? '../videoAdmin/navigation/updateInfo' : '../videoAdmin/navigation/create';
            const data = Object.assign({}, this.tabbarForm);
            data.type = 1;
            this.$store.dispatch('GetConnect', { url, data }).then(res => {
              this.modifyTabbarDialogVisible = false;
              this.$message.success(res.msg);
              this.tabbarForm = {};
              this.loadData();
            }).catch(e => {
              this.$message.error(e.msg + ',请刷新或联系管理员')
            })
          }
        })
      },

      // 修改导航图标状态
      changeTabbarItemStatus(row) {
        row.status = row.status === 0 ? 1 : 0;
        const url = '../videoAdmin/navigation/updateStatus';
        const data = { id: row.id, status: row.status};
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.$message.success(res.msg);
          this.loadData();
        }).catch(e => {
          row.status = row.status === 0 ? 1 : 0;
          this.$message.error(e.msg);
        })
      },

      // 删除导航图标
      tabbarDelete(row) {
        const url = '../videoAdmin/navigation/delete';
        const data = {
          type: 1,
          id: row.id
        }
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.$message.success(res.msg);
          this.loadData();
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员');
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../../styles/index.scss';

</style>
